<template>
  <div
    style="background-color: #fff; border-bottom: 1px solid rgb(231, 230, 230)"
  >
    <header>
      <ul>
        <li>
          <a href="javascript:;" class="pic" @click="HomePage"
            ><img src="../assets/图标.jpg" alt=""
          /></a>
        </li>
        <li><a href="javascript:;" @click="HomePage">首 页</a></li>
        <li>
          <a href="javascript:;" @click="goUserPermissions">权限</a>
        </li>
        <li><a href="javascript:;">课 程</a></li>
        <li class="search">
          <input
            type="text"
            placeholder="vue脚手架"
            v-model="query_value"
            @keyup.enter="Query"
          />
          <button @click="Query">搜 索</button>
        </li>
        <li><a href="javascript:;">收 藏</a></li>
        <li><a href="javascript:;">动 态</a></li>
        <li @click="toMessage"><a href="javascript:;">消 息</a></li>

        <li
          class="Head-portrait"
          @mouseover="StateDisplay"
          @mouseleave="StateLeave"
          style="margin-right: 0"
          @click="toPsersonCenter"
        >
          <!--  -->
          <div>
            <a href="javascript:;" class="picture">
              <img v-if="picture" :src="picture" alt="" />
              <img v-else src="../assets/头像.jpg" alt="" />
            </a>
            <div class="state" ref="state">
              <div class="state-username">
                “ {{ $store.getters.getLoginUserName }} ”
              </div>
              <div class="state-glory">
                <div class="fans">
                  <p>粉丝</p>
                  159
                </div>
                <div class="attention">
                  <p>关注</p>
                  80
                </div>
                <div class="praise">
                  <p>获赞</p>
                  123,4
                </div>
              </div>
              <div class="person-center" @click.stop="toPsersonCenter">
                个人中心
              </div>
              <div class="centent-manage" @click.stop="ToContentManagement">
                内容管理
              </div>
              <div class="role-apply" @click.stop="toRoleApply">
                <i class="bi bi-file-earmark-person-fill"></i> 角色申请
              </div>
              <div
                class="state-exit"
                v-if="$store.getters.getLoginStatus == 1"
                @click.stop="exitlogin"
              >
                退出登录
              </div>
              <div
                class="state-login"
                v-if="$store.getters.getLoginStatus == 0"
                @click.stop="backlogin"
              >
                立即登录
              </div>
            </div>
          </div>
        </li>
        <li style="margin-left: 20px">
          <a
            href="javascript:;"
            class="creation"
            @click.prevent="creativeCenter"
            ><i class="bi bi-pencil-square"></i>创作者中心</a
          >
        </li>
      </ul>
    </header>
  </div>
</template>

<script>
import { mixin } from "../mixin";
export default {
  name: "Header",
  mixins: [mixin],
  data() {
    return {
      UserStatus: 0,
      query_value: "", //查询关键字
      picture: "", //头像链接
    };
  },
  methods: {
    //跳转消息页面
    toMessage() {
      this.$router.push({
        name: "Message",
      });
    },
    //跳转内容管理页面
    ToContentManagement() {
      this.$router.push({
        name: "ContentManagement",
      });
    },
    //跳转角色申请页面
    toRoleApply() {
      this.$router.push({
        name: "RoleApply",
      });
    },
    // 跳转到查询界面
    Query() {
      // 传搜索框得值到查询页面
      let token = JSON.parse(sessionStorage.getItem("LoginToken")) || "";
      if (!token.token) {
        this.$message.warning("未登陆,请先登录!");
      } else {
        // 传搜索框得值到查询页面
        if (this.query_value) {
          this.$router.push({
            name: "BlogQuery",
            query: {
              query_value: this.query_value.trim(),
            },
          });
        }
      }
    },
    //跳转创作中心
    creativeCenter() {
      this.$router.push({
        name: "CreativeCenter",
      });
    },
    //跳转个人主页
    toPsersonCenter() {
      this.$router.push({
        name: "PersonalCenter",
      });
    },
    // 首页
    HomePage() {
      this.$router.push({
        name: "HomePage",
      });
    },
    // 评选博客
    goUserPermissions() {
      this.$router.push({
        name: "UserPermissions",
      });
    },
    // 写博客
    writeblog() {
      this.$router.push({
        name: "WriteBlog",
      });
    },
    // 立即登录
    backlogin() {
      this.$router.push({
        name: "UserLogin",
      });
    },
    StateDisplay() {
      this.$refs.state.style.height = "300px";
    },
    StateLeave() {
      this.$refs.state.style.height = "0";
    },
    //跳转登录
    ToLogin() {
      this.$router.push({
        name: "UserLogin",
      });
      this.instance.close();
    },
    // 退出登录
    exitlogin() {
      this.picture = "";
      this.$store.commit("LoginxStatus", { UserStatus: this.UserStatus });
      this.$router.push({
        name: "HomePage",
      });
      sessionStorage.clear();
   
    },
    //头像加载
    pageLoad() {
      if (sessionStorage.getItem("userPicture")) {
        let userPicture = JSON.parse(
          sessionStorage.getItem("userPicture")
        ).picture;
        if (userPicture) {
          this.picture = "http://" + userPicture;
        }
      }
    },
    //判断是否需要提示修改用户信息
    prompt() {
      if (!sessionStorage.getItem("LoginMessage")) {
        //提示登录
        const h = this.$createElement;
        this.instance = this.$notify({
          title: "提示",
          message: h(
            "p",
            {
              style: "text-align: center;",
            },
            [
              h("b", null, "您还未登录! 点击登录 ! "),
              h("br", null, null),
              h(
                "button",
                {
                  class: "btu",
                  on: {
                    click: this.ToLogin,
                  },
                },
                "前往登录"
              ),
            ]
          ),
          type: "warning",
          duration: 0,
          dangerouslyUseHTMLString: true,
          offset: 100,
        });
      }
    },
  },
  created() {
    this.pageLoad();
    this.$bus.$on("picture", this.pageLoad);
    this.prompt();
  },
};
</script>

<style scoped lang='less'>
/* @import url("../iconfont/iconfont.css"); */
* {
  list-style: none;
}
a {
  text-decoration: none;
  color: black;
}
/* 弹框样式 */
.btu {
  padding: 5px 10px;
  background-color: #409eff;
  color: #fff;
  border: none;
  margin-top: 20px;
  border-radius: 20px;
  text-align: center;
  min-width: 80px;
}
header {
  padding: 0 10px 0 10px;
  width: 100%;
  margin: 0 auto;
  height: 60px;
  line-height: 60px;
  font-size: 23px;
  box-sizing: border-box;
}
.el-dropdown-link {
  cursor: pointer;
  color: black;
  font-size: 23px;
}
.el-icon-arrow-down {
  border: none;
}

header /deep/.el-icon-arrow-down:before {
  content: "";
}
.pic {
  width: 70px;
  height: 50px;
  margin-left: 15px;
  margin-top: 5px;
}
.pic img {
  width: 90%;
}
header > ul {
  display: inline-block;
}
header > ul > li {
  padding: 0 25px;
}
header > ul > li {
  float: left;
}
header .search input {
  position: absolute;
  top: 8px;
  height: 40px;
  border-radius: 20px;
  border: 2px solid skyblue;
  padding-left: 20px;
  font-size: 20px;
  outline: none;
  width: 300px;
}
header .search {
  width: 400px;
  height: 10px;
  position: relative;
}
header .search button {
  outline: none;
  height: 44px;
  width: 100px;
  border: 0;
  background-color: skyblue;
  color: #0f0101;
  font-size: 20px;
  position: absolute;
  right: 20px;
  top: 8px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
header .search button:hover {
  cursor: pointer;
}
header .search button::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e858";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 20px;
}
header input::placeholder {
  font-size: 20px;
}
header .Head-portrait {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin: 12px 0 0 25px;
  padding: 0 !important;
}
header .Head-portrait .picture {
  width: 40px;
  height: 40px;
}
header .Head-portrait img {
  width: 100%;
  height: 100%;
}
header a {
  display: inline-block;
}
header .creation {
  position: relative;
  background-color: skyblue;
  padding: 0px 15px;
  border-radius: 20px;
  height: 45px;
  line-height: 45px;
  margin-top: 10px;
  text-align: center;
  font-size: 20px;
}
header .creation:hover {
  background-color: rgb(95, 193, 231);
}

header .creation i {
  margin-right: 10px;
}
/* 登录状态显示 */
.state {
  width: 220px;
  height: 0px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
  position: absolute;
  /* left: 820px; */
  right: 145px;
  top: 60px;
  z-index: 9999;
  font-size: 16px;
  transition: all 0.2s;
}
.state-username {
  width: 100%;
  /* height: 0px; */
  text-align: center;
  font-size: 16px;
}
.state-glory {
  cursor: pointer;
  height: 70px;
  display: flex;
  border-bottom: 1px solid rgb(224, 223, 223);
  border-top: 1px solid rgb(224, 223, 223);
}
.state-glory div {
  cursor: pointer;
  text-align: center;
  line-height: 30px;
  flex: 1;
  font-weight: 700;
  p {
    font-weight: normal;
  }
}
.person-center,
.centent-manage,
.role-apply {
  cursor: pointer;
  height: 30px;
  line-height: 30px;
  margin: 10px 0px;
}
.role-apply i {
  font-size: 20px;
  margin-right: 10px;
}
.state-exit,
.state-login {
  cursor: pointer;
  height: 30px;
  line-height: 30px;
}
.person-center,
.centent-manage,
.role-apply,
.exit {
  margin-left: 20px;
  /* border-bottom: 1px solid #ccc; */
}
.person-center::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e602";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 10px;
  font-size: 18px;
}
.centent-manage::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e637";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 10px;
  font-size: 18px;
}
.state-exit::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e618";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 10px;
  margin-left: 20px;
  font-weight: 700;
  font-size: 20px;
}
.state-login::before {
  content: "\e67c";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  margin-left: 20px;
  font-weight: 700;
  font-size: 23px;
}

.praise,
.fans,
.attention {
  margin-right: 5px;
}
</style>